<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>hello</title>
    <!-- 导入vue包 -->
    <script src="./lib/vue2.6.10.js"></script>
    <style>
    .big{
        width: 500px;
        height: 300px;
        background-color: #999;
    }
    .small{
        width: 100px;
        height: 80px;
        background: #969;
    }
    .red{
        background-color: red;
    }
    </style>
</head>
<body>
    <div id="app">
        <!-- 试用数组 -->
        <!-- <div :class="['big','red']"></div> -->
        <!-- 三目运算符 -->
        <!-- <div :class="['big', red ? 'red':'']"></div> -->
        <!-- 插入对象 -->
        <!-- <div :class="['big', {'red':isRed}]"></div> -->
        <!-- 使用对象 -->
        <!-- <div :class="{'red':isRed,big:false}"></div> -->
        <!-- 属性引用 -->
        <!-- <div :class="divClass"></div> -->
        <!-- 绑定匿名对象 -->
        <!-- <div class="small" :style="{'background-color':'red'}">11</div> -->
        <!-- 绑定对象 -->
        <!-- <div class="small" :style="innerStyle">11</div> -->
        <!-- 绑定多个对象 -->
        <div class="small" :style="['innerStyle','s2']">11</div>



    </div>


    <script>
        // 创建一个vue实例
        var vm = new Vue({
            el:'#app', // 当前new的这个vue实例要控制的DOM
            data:{     // 所有的数据
                isRed: true,
                divClass: {red:true,small:true},
                innerStyle:{'background-color':'red',color:'#fff'},
                s2: {'font-size':36}
            }

        })

    </script>
</body>
</html>